<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON数据测试</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .section {
            margin-bottom: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .section h3 {
            margin-top: 0;
            color: #333;
        }
        .character {
            display: inline-block;
            margin: 5px;
            padding: 10px;
            background: #e3f2fd;
            border-radius: 5px;
            border: 1px solid #2196f3;
        }
        .enemy {
            background: #ffebee;
            border-color: #f44336;
        }
        .position {
            font-size: 12px;
            color: #666;
        }
        .round {
            background: #f9f9f9;
            margin: 10px 0;
            padding: 10px;
            border-left: 4px solid #4caf50;
        }
        .action {
            margin: 5px 0;
            padding: 8px;
            background: white;
            border-radius: 3px;
            border-left: 3px solid #ff9800;
        }
        .error {
            color: red;
            font-weight: bold;
        }
        .success {
            color: green;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>战斗数据测试页面</h1>
        
        <div class="section">
            <h3>数据加载状态</h3>
            <div id="loadStatus">正在加载...</div>
        </div>
        
        <div class="section">
            <h3>战场信息</h3>
            <div id="battlefieldInfo"></div>
        </div>
        
        <div class="section">
            <h3>玩家队伍</h3>
            <div id="playerTeam"></div>
        </div>
        
        <div class="section">
            <h3>敌方队伍</h3>
            <div id="enemyTeam"></div>
        </div>
        
        <div class="section">
            <h3>第一回合详情</h3>
            <div id="firstRound"></div>
        </div>
        
        <div class="section">
            <h3>原始JSON数据（前500字符）</h3>
            <pre id="rawData" style="background: #f5f5f5; padding: 10px; overflow: auto; max-height: 200px;"></pre>
        </div>
    </div>

    <script>
        let battleData = null;

        async function loadAndTestData() {
            const statusDiv = document.getElementById('loadStatus');
            
            try {
                statusDiv.innerHTML = '正在获取JSON文件...';
                const response = await fetch('./battle_4v4_result.json');
                
                if (!response.ok) {
                    throw new Error(`HTTP错误: ${response.status} ${response.statusText}`);
                }
                
                statusDiv.innerHTML = '正在解析JSON数据...';
                const text = await response.text();
                
                // 显示原始数据的前500字符
                document.getElementById('rawData').textContent = text.substring(0, 500) + '...';
                
                battleData = JSON.parse(text);
                statusDiv.innerHTML = '<span class="success">✅ 数据加载成功</span>';
                
                displayBattleInfo();
                
            } catch (error) {
                statusDiv.innerHTML = `<span class="error">❌ 加载失败: ${error.message}</span>`;
                console.error('详细错误信息:', error);
            }
        }

        function displayBattleInfo() {
            if (!battleData) return;
            
            // 显示战场信息
            const battlefieldDiv = document.getElementById('battlefieldInfo');
            battlefieldDiv.innerHTML = `
                <p><strong>战斗类型:</strong> ${battleData.battle_type}</p>
                <p><strong>战斗ID:</strong> ${battleData.battle_id}</p>
                <p><strong>战场大小:</strong> ${battleData.battlefield.width} x ${battleData.battlefield.height}</p>
                <p><strong>总回合数:</strong> ${battleData.battle_results ? battleData.battle_results.length : 0}</p>
            `;
            
            // 显示玩家队伍
            const playerDiv = document.getElementById('playerTeam');
            let playerHtml = '';
            battleData.teams.player_team.forEach(char => {
                const pos = battleData.battlefield.player_positions[char.id];
                playerHtml += `
                    <div class="character">
                        <strong>${char.name}</strong><br>
                        <span class="position">位置: (${pos.x}, ${pos.y})</span><br>
                        HP: ${char.initial_stats.hp}<br>
                        最终状态: ${char.final_stats.is_alive ? '存活' : '阵亡'}
                    </div>
                `;
            });
            playerDiv.innerHTML = playerHtml;
            
            // 显示敌方队伍
            const enemyDiv = document.getElementById('enemyTeam');
            let enemyHtml = '';
            battleData.teams.enemy_team.forEach(char => {
                const pos = battleData.battlefield.enemy_positions[char.id];
                enemyHtml += `
                    <div class="character enemy">
                        <strong>${char.name}</strong><br>
                        <span class="position">位置: (${pos.x}, ${pos.y})</span><br>
                        HP: ${char.initial_stats.hp}<br>
                        最终状态: ${char.final_stats.is_alive ? '存活' : '阵亡'}
                    </div>
                `;
            });
            enemyDiv.innerHTML = enemyHtml;
            
            // 显示第一回合
            const firstRoundDiv = document.getElementById('firstRound');
            if (battleData.battle_results && battleData.battle_results.length > 0) {
                const round1 = battleData.battle_results[0];
                let roundHtml = `
                    <div class="round">
                        <h4>第 ${round1.round_number} 回合</h4>
                        <p><strong>行动数量:</strong> ${round1.actions.length}</p>
                `;
                
                round1.actions.forEach((action, index) => {
                    const character = [...battleData.teams.player_team, ...battleData.teams.enemy_team]
                        .find(c => c.id === action.character_id);
                    const characterName = character ? character.name : action.character_id;
                    
                    roundHtml += `
                        <div class="action">
                            <strong>行动 ${index + 1}:</strong> ${characterName} 使用 ${action.skill_id}<br>
                            <strong>目标位置:</strong> (${action.target.x}, ${action.target.y})<br>
                            <strong>效果数量:</strong> ${action.effects.length}
                        </div>
                    `;
                });
                
                roundHtml += '</div>';
                firstRoundDiv.innerHTML = roundHtml;
            } else {
                firstRoundDiv.innerHTML = '<p class="error">没有找到战斗回合数据</p>';
            }
        }

        // 页面加载时开始测试
        window.addEventListener('load', loadAndTestData);
    </script>
</body>
</html>